<template>
  <div id="tinymce-vue" ref="richText"></div>
</template>

<script>
import Tinymce from "tinymce/tinymce";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/themes/silver";
import "tinymce/plugins/image";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/imagetools";
import "@/../static/tinymce/zh_CN.js";
import "tinymce/skins/ui/oxide/skin.min.css";
import { transformToFile, createObjectURL } from "@/utils/data_transform";

export default {
  data() {
    return {
      toolbar
    };
  },
  mounted() {
    let plugins = "link lists code table wordcount";
    let toolbar =
      "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink code | removeformat";

    if (this.showImgPlugins) {
      plugins = "link lists image code table wordcount";
      toolbar =
        "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat";
    }

    Tinymce.init({
      selector: "#tinymce-vue",
      language: "zh_CN",
      min_height: 300,
      plugins,
      toolbar,
      images_upload_url: "postAcceptor.php",
      images_upload_handler: (blobInfo, success, failure) => {
        const blob = blobInfo.blob();
        const url = createObjectURL(blob);
        const name = blob.lastModifiedDate ? blob.name : "rich_text_image.jpg";

        if (!blob.lastModifiedDate) {
          this.filesObject[url] = transformToFile(blob, name, blob.type);
        }

        success(url);
      }
    });
  },
  beforeDestroy() {
    Tinymce.remove();
  },
  props: ["filesObject", "showImgPlugins"]
};
</script>
<style scoped>
</style>